@use "sass:math";

.editable-input {
  height: 70%;
  display: flex;
  align-items: center;
}

button.editable-input__label {
  display: flex;
  align-items: center;

  @include themify() {
    color: getThemifyVariable('inactive-text-color');
    & path {
      fill: getThemifyVariable('inactive-text-color');
    }
    &:hover {
    color: getThemifyVariable('logo-color');
      & path {
        fill: getThemifyVariable('logo-color');
      }
    }
  }
  cursor: pointer;
  line-height: #{math.div(18, $base-font-size)}rem;

  font-size: unset;
  font-weight: unset;
}

.editable-input__input {
  width: 100%;
}

.editable-input__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.editable-input--disabled {
  pointer-events: none;
  .editable-input__icon {
    display: none;
  }
}

.editable-input--is-not-editing .editable-input__input,
.editable-input--is-editing .editable-input__label {
  display: none;
}

.editable-input--is-editing .editable-input__input,
.editable-input--is-not-editing .editable-input__label {
  display: flex;
}
